<template>
  <a-modal
    title="修改"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    :footer="null"
    @cancel="onClose"
    :visible="feeEditVisiable"
  >
    <a-form :form="form">
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="费率代码(自动生成)" v-bind="formItemLayout">
            <a-input
              :disabled="true"
              v-decorator="['feeCd']"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24"
          ><a-form-item label="费率名称" v-bind="formItemLayout">
            <a-input v-decorator="['feeName',
                { rules: [{ required: true, message: '不能为空', trigger: 'blur'  }] },]" /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="费率描述" v-bind="formItemLayout">
            <a-input  v-decorator="['feeDesc',
                { rules: [{ required: true, message: '不能为空', trigger: 'blur'  }] },]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="费率使用场景" v-bind="formItemLayout">
            <a-select
              v-decorator="[
                'feeScene',
                { rules: [{ required: true, message: '不能为空', trigger: 'blur'  }] },
              ]"
            >
              <a-select-option value="0">单日交易累计金额计费</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <fee-table ref="feeTable"></fee-table>
    </a-form>
    <div class="drawer-bootom-button">
      <a-button style="margin-right: 0.8rem" @click="onClose">取消</a-button>
      <a-button @click="handleSubmit" type="primary" :loading="loading"
        >保存</a-button
      >
    </div>
  </a-modal>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import FeeTable from "../feeTable/FeeTable";

const formItemLayout = {
  labelCol: { span: 10 },
  wrapperCol: { span: 14 },
};
const supportAcctTypeList = [];
export default {
  name: "FeeEdit",
  components: { FeeTable},
  props: {
    feeEditVisiable: {
      default: false,
    },
  },
  data() {
    return {
      formItemLayout,
      form: this.$form.createForm(this),
      roleData: [],
      userId: "",
      loading: false,
      supportAcctTypeList,
    };
  },
  methods: {
    onClose() {
      this.loading = false;
      this.form.resetFields();
      this.$emit("close");
    },
    setFormValues({ ...list },[...feeInfos],type) {
      let fields = [
        "feeCd",
        "feeName",
        "feeDesc",
        "feeScene",
      ];
      Object.keys(list).forEach((key) => {
        if (fields.indexOf(key) !== -1) {
          this.form.getFieldDecorator(key);
          let obj = {};
          obj[key] = list[key];
          this.form.setFieldsValue(obj);
        }
      });
      this.$refs.feeTable.dataSource = feeInfos;
      this.$refs.feeTable.operatorType = type;
    },

    handleSubmit() {
      this.form.validateFields((err) => {
        let isFlag = false;
        this.feeInfoList = this.$refs.feeTable.dataSource;
        if (!err && this.feeInfoList.length !== 0) {
          let obj = this.form.getFieldsValue();
          this.feeInfoList.forEach((item,index)  => {
            if(index !== 0){
              let preItem = this.feeInfoList[index - 1];
              if(preItem.pEndValue !== item.pStartValue){
                isFlag = true;
                return;
              }
            }
            if(index === this.feeInfoList.length - 1){
              if(item.pEndValue !== "99999999999999.99"){
                isFlag = true;
                return;
              }
            }
            Object.keys(obj).forEach((key) => {
              item[key] = obj[key];
            });
          });
          if(isFlag){
            this.$message.error("请按照分段规则填写");
            return
          }
          this.$post('/admin/fee/feeInfo/edit', {
            feeInfoList:this.feeInfoList,
            optFlag:"upd",
          }).then((r) => {
            if (r.data.code === "100000") {
              this.$emit('success')
            }else{
              this.$message.error(r.data.message);
            }
          }).catch(() => {
            this.loading = false
          })
        }
      });
    },
  },
};
</script>
